<template>
	<view class="order page">
	        <view class="con">
	<!--            <div class="type-bar">-->
	<!--                <div class="item " :class="{selected:index==type}" v-for="(tab,index) in typeBarList" :key="index">-->
	<!--                    {{tab}}-->
	<!--                </div>-->
	<!--            </div>-->
	
	            <scroll-view ref="scroll" scroll-y="true" @scrolltolower="reflash" scroll-with-animation style="height: 100vh;">
	                <view class="order-list">
	                    <view class="item" v-for="(order,index) in orderList" :key="order.mallOrder.id" @click="toDetail(order.mallOrder.id,order.mallOrder.orderNo)">
	                        <view class="title border-bottom-1px" >
	                            <view class="users">
	                               <img v-if="order.fromUser.avatar" :src="order.fromUser.avatar" class="avatar" alt="">
	                                <text class="name">{{order.fromUser.name}}</text>
	
	                                <text   class="name" style="margin: 0 10px">&gt;</text>
	
	                               <img v-if="order.user.avatar" :src="order.user.avatar" class="avatar" alt="">
	                                <text class="name">{{order.user.name}}</text>
	                            </view>
	
	                            <view class="statuses">
	                                <text class="status">{{orderPayStatusOptions[order.mallOrder.payStatus]}}</text>
	                                <text class="status">{{orderStatusOptions[order.mallOrder.orderStatus]}}</text>
	                            </view>
	
	
	                        </view>
	                        <view class="order-item" v-for="(item,itemIndex) in order.mallOrder.items" :key="itemIndex">
	                            <order-item :item="item"></order-item>
	                        </view>
	
	                        <view class="total">
	                            <text>共{{order.mallOrder.quantity}}件商品  订单金额: ¥ </text>
	                            <text class="price" v-if="order.mallOrder.price">{{order.mallOrder.price.toFixed(2)}}</text>
	                        </view>
	
	                        <view class="btns border-top-1px" >
	                            <radiusBtn class="btn" color="#a1a1a1" fontSize="24rpx" borderColor="#a1a1a1" :txt="order.mallOrder.orderType==0?'物流信息':'订单明细'"
	                                       width="130rpx" height="52rpx" bgColor="#FFFFFF"></radiusBtn>
	
	<!--                            <radiusBtn class="btn" color="#F7895E" fontSize="0.32rem" borderColor="#F7895E" txt="确认收货"-->
	<!--                                       width="1.733rem" height="0.69rem" bgColor="#FFFFFF"></radiusBtn>-->
	                        </view>
	                    </view>
	                </view>
	            </scroll-view>
	
	
	        </view>
	    </view>
</template> 

<script>
	// import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import orderItem from '@/components/order-item/index.vue'
	import radiusBtn from '@/components/radius-btn'
	// import empty from "@/components/empty";
	// import Json from '@/Json';
	import {listOrder} from '@/api/order.js'
	export default {
		components: {
			orderItem,radiusBtn
		},
		data() {
			return {
				page:1,
				orderList:[],
				orderStatusOptions:["新订单","配货中","已发货","已收货","退款中","已退款","已拒绝","已完成","已取消"],
				orderPayStatusOptions:["未支付","已支付"],
				options: {
					pullDownRefresh: {
						txt: ' ',
						stopTime: 0
					},
					pullUpLoad: true,
				}
			}
		},
		
		onLoad(options){
			/**
			 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
			 * 替换onLoad下代码即可
			 */
			// this.tabCurrentIndex = +options.state;
			// // #ifndef MP
			// this.loadData()
			// // #endif
			// // #ifdef MP
			// if(options.state == 0){
			// 	this.loadData()
			// }
			// // #endif
			this.listOrder()
			// console.log(this.tabCurrentIndex)
			 this.page = 1
			
		},
		 
		methods: {
			reflash(){
				// console.log(11)
				this.listOrder()
			},
			//获取订单列表
			async listOrder(){
				const {data:res} = await listOrder(this.page)
				this.orderList = this.orderList.concat(res)
				// console.log(this.orderList)
				this.page++
			},
			 toDetail(id) {
				
			},
			pullDown() {
				this.page = 1
				this.getList()
			},
			pullUpLoad() {
				this.getList()
			},
			toDetail(id,orderNo) {
				uni.navigateTo({
					url:`/pages/order/detail?id=${id}&orderNo=${orderNo}`
				})
			}
		},
	}
</script>

<style lang="stylus" scoped>
	.order
		/*overflow hidden*/
		height 100%
		overflow hidden

		.con
			height 100%
			// background url("~@/assets/cbg.png") no-repeat $page-bg
			background-size 100% auto
			padding 0 20rpx
			padding-top 20rpx

			.type-bar
				display flex
				justify-content space-around
				margin-bottom 20rpx

				.item
					width fit-content
					padding 0 10rpx
					display flex
					align-items center
					justify-content center
					font-size: 28rpx;
					font-weight: 400;
					height 50rpx
					color #6F6F6F

					&.selected
						color: red;
						border-bottom 4rpx solid red

			.order-list
				margin-top 24rpx

				.item
					border-radius 10rpx
					background-color white
					margin-top 24rpx


					.title

						/*margin-bottom 10px*/
						height 48rpx
						padding 10rpx 20rpx
						display flex
						align-items center
						justify-content space-between
						border-bottom-color  $page-bg
						.users
							display flex
							align-items center
							.avatar
								vertical-align bottom
								width 32rpx
								height 32rpx
								margin-right 12rpx
								border-radius 50%
							.name
								vertical-align bottom
								color #4E3D07
								font-size 24rpx
								font-weight 300

						.statuses
							display flex
							align-items center
							.status
								vertical-align bottom
								color #F7895E
								font-size 24rpx
								font-weight 300
								color: rgba(247, 137, 94, 1);
								/*line-height 24px*/
								margin-left 40rpx

					.order-item
						padding 0 10rpx

					.total
						padding 20rpx 0
						text-align right
						padding-right 30rpx
						color #A1A1A1
						font-size 22rpx

						.price
							font-size 30rpx
							color #4E3D07

					.btns
						display flex
						align-items center
						justify-content flex-end

						height 86rpx
						border-color: rgba(220, 220, 220, 1);

						.btn
							margin-right 32rpx


</style>
